// 库引入
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';
import {Link} from 'react-router-dom';
import {Row, Col} from 'antd';

// 样式引入
import styles from './item.module.less';

@observer
class Item extends Component {
  render() {
    return (
      <li
        className={classNames(styles.item, this.props.className)}
        style={this.props.style}>
        <Link to={`/library-details/${this.props.name}`} className={styles.link}>
          <Row type="flex">
            <Col xs={24} md={6}>
              <h4 className={styles.title}>{this.props.name}</h4>
            </Col>
            <Col xs={24} md={18}>
              <Row>
                <Col xs={0} md={24}>
                  <p className={styles.desc}>{this.props.desc}</p>
                </Col>
                <Col className={styles.starsCol}>
                  <i className={classNames('iconfont icon-shoucang-xianxing', styles.starsIcon)} />
                  <span>{this.props.star}</span>
                </Col>
              </Row>
            </Col>
          </Row>
        </Link>
      </li>
    );
  }
}

Item.defaultProps = {
  name: '',
  desc: '',
  start: 0
};

const InjectItem = inject(({
  someStore = {}
}) => ({someProps: someStore.attribute}))(Item);

export {Item, InjectItem};